Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
  css-doodle {
    --1: (
      :doodle {
        flex: none;
        @grid: 1x30;
        background: #FF4C00;
        overflow: hidden;
      }
      @place-cell: center;
      ::before, ::after { transition: inherit; }
      @match (i >= 2) {
        z-index: @p(2, 3, 4);
        transition: 0.5s ease all;
      }
      @nth(1) {
        @size: 80%;
        background: radial-gradient(circle at 50% 50%, #fff calc(58% - 0.1vmin), #E386B3 calc(58% - 0.1vmin + 1px), #E386B3 calc(58% + 0.1vmin), #fff calc(58% + 0.1vmin + 1px));
        border-radius: 100%;
      }
      @match(i >= 2 && i <= 7) {
        @size: calc(3.2vmin * 1.4);
        transform: translate(@m2(@r(±160%))) rotate(@r(360deg));
        background-image: @doodle(
          @grid: 1x6 / 100% 100%;;
          @size: 10% 20%;
          position: absolute;
          top: 29%;
          left: 45%;
          background-color: #d5f2d6;
          border-radius: 100%;
          transform: rotate(calc(60deg * (@i + 1))) translate3d(0%, -40%, 0);
          transform-origin: 50% 100%;
        );
        background-color: #74c58d;
        border: 0.28vmin solid #006c61;
        border-radius: 100%;
      }
      @match(i > 7  && i <= 12) {
        @size: 7vmin;
        z-index: @p(3, 4);
        transform: translate(@m2(@r(±90%))) rotate(@r(360deg));
        background: radial-gradient(circle at 50% 50%, @stripe(transparent 60%, #fff));
        border: 0.28vmin solid #b24478;
        clip-path: inset(0 50% 0 0);
        border-radius: 100%;
      }
      @match(i > 12  && i <= 17) {
        @size: calc(3.1vmin * 1.3) calc(3.3vmin * 1.3);
        transform: translate(@m2(@r(±180%))) rotate(@r(360deg));
        background-color: #ff4c00;
        border-radius: 100%;
        ::before, ::after {
          content: "";
          position: absolute;
          top: 10%;
          left: calc(0.4vmin * 1.3);
          width: calc(2.3vmin * 1.3);
          height: calc(2.3vmin * 1.3);
          background-image: @doodle(
            @grid: 1x3 / 100% 100%;;
            @size: 12% 22%;
            position: absolute;
            top: 25%;
            left: 45%;
            background-color: #fce8e5;
            border-radius: 100%;
            transform: rotate(calc(60deg * (@i + 1) + 180deg)) translate3d(0%, -60%, 0);
            transform-origin: 50% 100%;
          );
          background-color: #ffa788;
          border-radius: 100%;
          clip-path: inset(0 0 50% 0);
        }
        ::after {
          top: 19%;
          transform: rotate(180deg);
        }
      }
      @match(i > 17  && i <= 27) {
        z-index: @p(1, 2);
        transform: translate(@m2(@r(±80%))) rotate(@r(360deg));
        @size: calc(6vmin * 1.2) calc(6vmin * 1.2);
        background-image: @doodle(
          @grid: 1x9 / 100% 100%;
          @size: 100% 100%;
          :container {
            --color: @p(#006c61, #2d996e, #74c58d);
            --color-1: @P;
          }
          position: absolute;
          @nth(1, 2, 3, 4, 5) {
            @size: 40%;
            background: @var(--color);
            border-radius: 100%;
          }
          @nth(1) {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
          }
          @nth(2) {
            top: 28%;
            left: 15%;
          }
          @nth(3) {
            top: 28%;
            right: 15%;
          }
          @nth(4) {
            top: 56%;
            right: 5%;
          }
          @nth(5) {
            top: 56%;
            left: 5%;
          }
          @nth(6) {
            top: 50%;
            left: 50%;
            @size: 40% 46%;
            transform: translateX(-50%);
            background: @var(--color);
          }
          @nth(7) {
            @size: 0;
            left: 50%;
            bottom: 4%;
            transform: translateX(-50%);
            border-style: solid;
            border-width: 0 8vmin 75vmin;
            border-color: transparent transparent @var(--color-1) transparent;
          }
          @nth(8, 9) {
            @size: 0;
            border-style: solid;
            border-width: 0 7vmin 35vmin;
            border-color: transparent transparent @var(--color-1) transparent;
          }
          @nth(8) {
            left: 57%;
            bottom: 32%;
            transform: rotate(50deg);
          }
          @nth(9) {
            right: 57%;
            bottom: 16%;
            transform: rotate(-50deg);
          }
        );
      }
      @match(i > 27 && i < 34) {
        z-index: 10;
        @size: 1.4vmin;
        transform: translate(@m2(@r(±400%))) rotate(@r(360deg));
        background: #fff;
      }
    );
    --2: (
      :doodle {
        flex: none;
        @grid: 1x42;
        background: #FFa788;
        overflow: hidden;
      }
      @place-cell: center;
      ::before, ::after { transition: inherit; }
      @match (i >= 4) {
        transition: 0.5s ease all;
      }
      @nth(1) {
        @size: 80%;
        background: #545150;
        border-radius: 100%;

::after {
          content: "";
          @size: 100% 100%;
          @place-cell: center;
          background: #f2e7e1;
          clip-path: @shape(
            points: 360;
            r: 0.85 + cos(50t)*.015;
          )
        }
      }
      @nth(2, 3) {
        position: absolute;
        @size: 10% 10%;
        background: #545150;

::before, ::after {
          content: "";
          @size: 100% 100%;
          background: #545150;
          border-radius: 20%;
        }

::before {
          @place-cell: 0% 50%;
          transform: skew(-20deg);
        }

::after {
          @place-cell: 100% 50%;
          transform: skew(20deg);
        }
      }
      @nth(2) {
        @place-cell: 21% 21%;
        transform: rotate(-45deg);
      }
      @nth(3) {
        @place-cell: 79% 79%;
        transform: rotate(135deg);
      }
      @match(i > 3 && i < 23) {
        @size: 2vmin 1vmin;
        background: #fff;
        transform: translate(@m2(@r(±7vmin))) rotate(@r(360deg));
        border-radius: 100%;
      }
      @nth(24, 25, 26) {
        z-index: 1;
        @size: 12% 6%;
        --color-1: @p(#d5c7b8, #b1a79e);
        --color-2: @P;
        @place-cell: @pd(32% 32%, 42% 26%, 26% 42%);
        transform: rotate(@r(360deg));

::before {
          content: "";
          @size: 0;
          @place-cell: center -100%;
          transform: translateX(-50%);
          border-style: solid;
          border-width: 0 0.65vmin 5vmin;
          border-color: transparent transparent @var(--color-1) transparent;
          clip-path: inset(50% 0 0 0);
        }

::after {
          content: "";
          position: absolute;
          @size: 100% 100%;
          border-radius: 50% 50% 0 0/100% 100% 0 0;
          background: @var(--color-2);
        }
      }
      @match(i > 26 && i < 30) {
        @size: calc(3.2vmin * 1);
        transform: @pd(
          translate(@r(2vmin, 3vmin), @r(6vmin, 7.5vmin)) rotate(@r(360deg)),
          translate(@r(3vmin, 5vmin), @r(4vmin, 6vmin)) rotate(@r(360deg)),
          translate(@r(5vmin, 7vmin), @r(2vmin, 3vmin)) rotate(@r(360deg)),
        );
        background-image: @doodle(
          @grid: 1x6 / 100% 100%;;
          @size: 10% 20%;
          position: absolute;
          top: 29%;
          left: 45%;
          background-color: #d5f2d6;
          border-radius: 100%;
          transform: rotate(calc(60deg * (@i + 1))) translate3d(0%, -40%, 0);
          transform-origin: 50% 100%;
        );
        background-color: #74c58d;
        border: 0.22vmin solid #006c61;
        border-radius: 100%;
      }
      @match(i > 29 && i < 36) {
        position: absolute;
        top: calc(70% - (@i - 30) * 2.3%);
        left: calc(30% + (@i - 30) * 2.3%);
        @size: 0.6vmin 7vmin;
        background: @pd(#2e996e, #75c58d);
        transform: rotate(@r(-40, -50)deg) translateY(@r(±20%));
      }
      @match(i > 35 && i < 42) {
        position: absolute;
        top: calc(30% + (@i - 36) * 2.3%);
        left: calc(70% - (@i - 36) * 2.3%);
        @size: 0.6vmin 7vmin;
        background: @pd(#ffa788, #ff4b00);
        transform: rotate(@r(-40, -50)deg) translateY(@r(±20%));
      }
      @nth(42) {
        z-index: 1;
        @size: 11vmin;
        transform: rotate(@r(180deg));
        filter: drop-shadow(0 0 1vmin #00000050);

::before {
          content: "";
          @size: 100%;
          @place-cell: center;
          background: #fff;
          clip-path: @shape(
            points: 360;
            r: .8 + cos(@p(2,3,4,5)t)*.03;
          );
        }

::after {
          content: "";
          @size: @r(28,32)%;
          @place-cell: center;
          background: #ffd850;
          border-radius: 100%;
          transform: translate(@m2(@r(±10%)));
        }
      }
    );
    --3: (
      :doodle {
        flex: none;
        @grid: 1x9;
        background: #ffb700;
        overflow: hidden;
      }
      @place-cell: center;
      ::before, ::after { transition: inherit; }
      @match (i >= 2) {
        z-index: @p(2, 3, 4);
        transition: 0.5s ease all;
      }
      @nth(1) {
        @size: 82%;
        background: radial-gradient(circle at 50% 50%, #fff calc(58% - 0.1vmin), #E386B3 calc(58% - 0.1vmin + 1px), #E386B3 calc(58% + 0.1vmin), #fff calc(58% + 0.1vmin + 1px));
        border-radius: 100%;
        clip-path: @shape(
          points: 360;
          r: 0.95 + cos(@p(10,11,12,13,14)t)*.015;
        );
        transition: 0.5s ease clip-path;
      }
      @nth(2, 3) {
        @size: 45% 2.5vmin;
        @place-cell: 50% @pd(20, 30)%;
        transform: translate(@r(±20%), @r(±10%)) rotate(@r(±25)deg);

::before {
          content: "";
          @size: 100%;
          background: linear-gradient(transparent calc(50% - 0.1vmin), #000 calc(50% - 0.1vmin + 1px), #000 calc(50% + 0.1vmin), transparent calc(50% + 0.1vmin + 1px));
        }

::after {
          content: "";
          @size: 10vmin 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: @doodle(
            @grid: 4x1 / 100% 100%;
            background-color: #ff4b00;
            border-radius: @pd(20%, 100%);
            ::before, ::after {
              content: "";
              @place-cell: @r(20%, 80%) @r(20%, 80%);
              @size: 20vmin;
              background: #db3b11;
              transform: rotate(@r(360deg));
            }
          );
        }
      }
      @nth(4, 5, 6) {
        @size: 5.5vmin;
        @place-cell: @pd(
          @r(61, 65)% @r(48, 52)%,
          @r(74, 78)% @r(48, 52)%,
          @r(66, 70)% @r(60, 64)%
        );
        ::before {
          content: "";
          @size: 100%;
          background-image: @m6(radial-gradient(ellipse at 50% 50%, @stripe(#c12701 40%, transparent)));
          background-size: 20% 10%;
          background-position: @m6(@r(30, 70)% @r(30, 70)%);
          background-repeat: no-repeat;
          background-color: #db3b11;
          clip-path: @shape(
            points: 200;
            scale: .03;
            k: 18;
            x: (k+1)*cos(t) - cos((k+1)*t);
            y: (k+1)*sin(t) - sin((k+1)*t);
          );
        }
        ::after {
          content: "";
          @size: 100%;
          @place-cell: center;
          background: @doodle(
            @grid: 1x2 / 100% 100%;
            @size: 8% 25%;
            @place-cell: @r(20%, 80%) @r(20%, 80%);
            background: #2e996e;
            transform: rotate(@r(360deg));
          );
        }
      }
      @nth(7, 8) {
        @place-cell: @pd(
          80% 64%,
          66% 75%
        );
        transform: rotate(@r(360deg));
        @size: 11%;
        background: linear-gradient(-45deg, #2e996e calc(50% - 0.15vmin), #252525 calc(50% - 0.15vmin + 1px), #252525 calc(50% + 0.15vmin), #2e996e calc(50% + 0.15vmin + 1px));
        border-radius: 100% 0 100% 0;
      }
      @nth(9) {
        @size: 9vmin 13vmin;
        background-image: @doodle(
          @grid: 16x12 / 100% 100%;
          background-color: @p(#ff4b00, #ffb700);
          border-radius: 100%;
          transform: rotate(@r(360deg)) translate(@r(±10%), @r(±10%));
          @random(0.78) {
            opacity: 0;
          }
        );
        background-color: #ffd850;
        @place-cell: @r(38, 42)% @r(58, 62)%;
        transform: rotate(@r(-30, -60)deg);
        clip-path: @shape(
          points: 200;
          scale: .02;
          k: 40;
          x: (k+1)*cos(t) - cos((k+1)*t);
          y: (k+1)*sin(t) - sin((k+1)*t);
        );

::before {
          content: "";
          @size: 100%;
          background-image: @doodle(
            @grid: 16x12 / 100% 100%;
            background-color: #2e996e;
            transform: rotate(@r(360deg)) translate(@r(±10%), @r(±10%));
            opacity: @p(0, 0, 0, 0, 1);
            @random(0.78) {
              opacity: 0;
            }
          );
        }
      }
    );
    --4: (
      :doodle {
        flex: none;
        @grid: 1x14;
        background: radial-gradient(circle at 50% 50%, #fffaf8 calc(53% - 1px), #d5c7b8 53%, #d5c7b8 56%, #006c61 calc(56% + 1px));
        overflow: hidden;
      }
      @place-cell: center;
      transition: 0.5s ease all;
      ::before, ::after { transition: inherit; }
      @nth(1) {
        @size: 22%;
        @place-cell: 34% 34%;
        border: 0.5vmin solid #d5c7b8;
        border-radius: 100%;
        transform: rotate(@r(360deg));
        ::before {
          content: "";
          @size: 100%;
          background: linear-gradient(60deg, #db3b11 70%, #000 85%);
          border-radius: 100%;
        }
        ::after {
          content: "";
          @size: 100%;
          @place-cell: center;
          background: @doodle(
            @grid: 6x6 / 100% 100%;
            background: #ffa788;
            border-radius: 100%;
            transform: translate(@m2(@r(±50%)));
            @random(0.7) {
              opacity: 0;
            }
          );
          border-radius: 100%;
        }
      }
      @nth(2) {
        @size: 22%;
        @place-cell: 57% 28%;
        background-image: @doodle(
          @grid: 2x2 / 100% 100%;
          background: #d5f2d6;
          transform: scale(0.5) rotate(@r(±40deg));
          transform-origin: @pn(80% 80%, 0 80%, 100% 50%);
          @nth(4) {
            opacity: 0;
          }
        );
        background-color: #2e996e;
        border: 0.5vmin solid #d5c7b8;
        border-radius: 100%;
        transform: rotate(@r(360deg));

::after {
          content: "";
          @size: 100%;
          @place-cell: center;
          transform: rotate(@r(360deg));
          background-image: @doodle(
            @grid: 2x2 / 100% 100%;
            background: #ff4b00;
            transform: scale(0.25) rotate(@r(±40deg));
            transform-origin: @pn(80% 80%, 0 80%, 100% 50%);
            @nth(4) {
              opacity: 0;
            }
          );
        }
      }
      @nth(3) {
        @size: 28%;
        @place-cell: 70% 52%;
        background-image: @doodle(
          @grid: 2x2 / 100% 100%;
          background: #ffa788;
          transform: rotate(@pn(@r(±40deg), @r(±40deg), @r(90, 130)deg)) scale(0.6, 0.8);
          border-radius: @rep(4, @r(30%, 100%));
          transform-origin: @pn(80% 80%, 0 80%, 100% 60%);
          @nth(4) {
            opacity: 0;
          }
        );
        background-color: #ff4b00;
        border: 0.7vmin solid #d5c7b8;
        border-radius: 100%;
        transform: rotate(@r(360deg));

::before {
          content: "";
          @size: 100%;
          @place-cell: center;
          transform: rotate(@r(360deg));
          background-image: @doodle(
            @grid: 2x2 / 100% 100%;
            background: @p(#2e996e, #75c58d);
            transform: scale(0.3) rotate(@r(±40deg));
            transform-origin: @pn(80% 80%, 0 80%, 100% 50%);
            @nth(4) {
              opacity: 0;
            }
          );
        }

::before {
          content: "";
          @size: 100%;
          transform: scaleY(0.6);
          background-image: linear-gradient(90deg, #000, #ffb700 40%);
          clip-path: @shape(
            points: 360;
            r: .8 + cos(5t)*.015;
          );
        }
        ::after {
          content: "";
          @size: 100%;
          @place-cell: center;
          background-image: @m4(radial-gradient(circle at 50% 50%, #ff9300 @r(10, 18)%, transparent calc(@lr% - 1px)));
          background-position: @m4(@r(0, 100)% @r(20, 80)%);
          background-size: 50% 50%;
          background-repeat: no-repeat;
        }
      }
      @nth(8) {
        @size: 11vmin;
        @place-cell: 33% 60%;
        transform: rotate(@r(-130, -170)deg);

::before {
          content: "";
          @size: 100%;
          transform: scaleY(0.6);
          background: #ffd850;
          clip-path: @shape(
            points: 360;
            r: .8 + cos(5t)*.015;
          );
        }
        ::after {
          content: "";
          @size: 100%;
          @place-cell: center;
          background-image: @m4(radial-gradient(circle at 50% 50%, #ffb700 @r(10, 18)%, transparent calc(@lr% - 1px)));
          background-position: @m4(@r(0, 100)% @r(20, 80)%);
          background-size: 50% 50%;
          background-repeat: no-repeat;
        }
      }
      @nth(9,10,11,12,13,14) {
        @size: 0.8vmin;
        background: @p(#75c58d, #2e996e);
        @place-cell: @r(25, 50)% @r(55, 75)%;
        transform: rotate(@r(360deg));
      }
    );
    --5: (
      :doodle {
        flex: none;
        @grid: 1x15;
        background: radial-gradient(circle at 50% 50%, #f2e7e1 calc(48% - 1px), #fffaf8 48%, #fffaf8 56%, #ffaece calc(56% + 1px));
        overflow: hidden;
      }
      @place-cell: center;
      transition: 0.5s ease all;
      ::before, ::after { transition: inherit; }
      @nth(1, 2) {
        @size: 27%;
        @place-cell: @pd(
          44% 30%,
          35% 44%
        );
        transform: rotate(@r(±20deg));
        border-top-left-radius: 20%;
        border-top: 0.35vmin solid #ff9300;
        border-left: 0.35vmin solid #ff9300;
        background: linear-gradient(135deg, #ffd850 calc(50% - 1px), transparent 50%);
      }
      @nth(3) {
        @size: 26% 29%;
        @place-cell: @r(68, 72)% @r(50, 54)%;
        transform: rotate(@r(±15deg));
        ::before {
          content: "";
          @size: 100%;
          transform: scaleY(1.2);
          background: #fffaf8;
          clip-path: @shape(
            points: 360;
            r: .8 + cos(5t)*.06;
          );
        }

::after {
          content: "";
          @size: 2.3vmin;
          @place-cell: center;
          background: #ffd850;
          border-radius: 100%;
        }
      }
      @nth(4, 5) {
        @place-cell: @pd(
          61% 28%,
          65% 35%
        );
        @size: 7vmin 1.8vmin;
        background: #ff4b00;
        border-radius: 1.8vmin;
        transform: rotate(@r(-55, -35)deg);
      }
      @nth(6,7,8,9,10) {
        @size: 0.6vmin;
        background: @p(#75c58d, #2e996e);
        @place-cell: @r(65, 75)% @r(45, 60)%;
        transform: rotate(@r(360deg));
      }
      @nth(11, 12, 13) {
        @place-cell: @pd(
          65% 72%,
          52% 75%,
          56% 67%,
        );
        @size: 2.5vmin 1.5vmin;
        background: @p(#ffd850, #ffb700);
        border-radius: 20%;
        transform: rotate(@r(360deg));
      }
      @nth(14, 15) {
        @size: 3vmin 9vmin;
        @place-cell: @pd(
          37% 55%,
          45% 62%
        );
        transform: rotate(@r(20, 50)deg);
        background: @doodle(
          @grid: 1x100 / 100% 100%;
          background: #ff4b00;
          transform: scaleX(0.15) translateX(calc(@sin(@i / 3.5) * π * 6%));
          box-shadow:
            -100vmin 0 0 #ffa788, 100vmin 0 0 #ffa788,
            -200vmin 0 0 #ff4b00, 200vmin 0 0 #ff4b00;
        );
      }
    );
    --6: (
      :doodle {
        flex: none;
        @grid: 1x24;
        background: radial-gradient(circle at 50% 50%, #ecc39f 45%, #fffaf8 calc(45% + 1px), #fffaf8 calc(54% - 1px), #d5c7b8 54%, #d5c7b8 56%, #db3b11 calc(56% + 1px));
        overflow: hidden;
      }
      @place-cell: center;
      transition: 0.5s ease all;
      ::before, ::after { transition: inherit; }
      @nth(1, 2, 3, 4) {
        @size: @pd(
          9vmin 6vmin,
          9vmin 6vmin,
          9vmin 6vmin,
          7vmin 6vmin,
        );
        @place-cell: @pd(
          42% 38%,
          60% 42%,
          59% 59%,
          45% 65%,
        );
        transform: rotate(@pn(-45, 45, 45, 45)deg);
        background-image: @doodle(
          @grid: 1x5 / 100% 100%;
          @place-cell: center;
          @size: calc(30vmax + 70vmax * @i / 5) calc(20vmin * @i);
          border: 4vmin solid #fff;
          border-radius: calc(20vmin * @i);
        );
        background-color: #ecc39f;
        border-radius: 5vmin;
      }
      @match (i >= 5) {
        z-index: @p(2, 3, 4);
      }
      @nth(5, 6, 7, 8, 9, 10) {
        @size: 1.2vmin 0.4vmin;
        transform: translate(@m2(@r(±5vmin))) rotate(@r(360deg));
        background: @p(#006c61, #2d996e);
      }
      @nth(11, 12, 13, 14) {
        @size: 1.3vmin;
        transform: translate(@m2(@r(±5vmin))) rotate(@r(360deg));
        border: 0.3vmin solid @p(#006c61, #2d996e);
        border-radius: 100%;
      }
      @nth(15, 16, 17) {
        @size: 11%;
        transform: translate(@m2(@r(±5vmin))) rotate(@r(360deg));
        background: linear-gradient(-45deg, #2e996e calc(50% - 0.15vmin), #252525 calc(50% - 0.15vmin + 1px), #252525 calc(50% + 0.15vmin), #2e996e calc(50% + 0.15vmin + 1px));
        border-radius: 100% 0 100% 0;
      }
      @nth(18, 19) {
        @size: 5vmin;
        transform: translate(@m2(@r(±5vmin))) rotate(@r(360deg));
        background: radial-gradient(circle at 50% 50%, @stripe(transparent 60%, #fff));
        border: 0.28vmin solid #b24478;
        clip-path: inset(0 50% 0 0);
        border-radius: 100%;
      }
      @nth(20, 21) {
        @size: 2.5vmin;
        transform: translate(@m2(@r(±5vmin))) rotate(@r(360deg));
        background: @pn(#ff4b00, #db3c11);
        border-radius: 100%;
      }
      @nth(22, 23) {
        transform: translate(@m2(@r(0, 4vmin))) rotate(@r(-40, -20)deg);
        @size: 1.2vmin 6vmin;
        color: @pn(#ff4b00, #db3c11);
        background-image: linear-gradient(90deg, @stripe(transparent, #fff 0.2vmin, transparent));
        background-color: currentColor;
        border-radius: 0.4vmin 0.4vmin 0.4vmin 0.6vmin;

::before {
          content: "";
          @size: 70% 100%;
          position: absolute;
          top: 0;
          left: 85%;
          background: currentColor;
          clip-path: polygon(100% 41%, 100% 78%, 0 100%, 0 22%);
        }
      }
      @nth(24) {
        @size: 20vmin 0.5vmin;
        @place-cell: 50% 21%;
        transform: rotate(@r(±10deg));

::before {
          content: "";
          @size: 100%;
          background: #2d996e;
        }
        ::after {
          content: "";
          position: absolute;
          top: 200%;
          left: 0;
          @size: 100%;
          background: #2d996e;
          transform: rotate(@r(±3deg));
        }
      }
    );
    --7: (
      :doodle {
        flex: none;
        @grid: 1x27;
        background: radial-gradient(circle at 50% 50%, #fffaf8 53%, #2f69af calc(53% + 1px));
        overflow: hidden;
      }
      @place-cell: center;
      transition: 0.5s ease all;
      ::before, ::after { transition: inherit; }
      @match(i <= 13) {
        @size: 3.5vmin 1.2vmin;
        color: #6da2ef;
        border-top: 0.2vmin solid currentColor;
        border-left: 0.2vmin solid currentColor;
        border-right: 0.2vmin solid currentColor;
        background-image: linear-gradient(90deg, @stripe(transparent, currentColor 0.2vmin, transparent));
        transform: rotate(calc(360deg * @i / 13)) translateY(-8.6vmin);

::before {
          content: "";
          @size: 35% 60%;
          position: absolute;
          bottom: 0;
          left: 0;
          border-right: 0.2vmin solid currentColor;
          border-bottom: 0.2vmin solid currentColor;
          -webkit-box-reflect: right 1vmin;
        }

::after {
          content: "";
          @size: 25% 0.2vmin;
          background: currentColor;
          @place-cell: 20% 50%;
          -webkit-box-reflect: right 1.1vmin;
        }
      }
      @nth(14, 15) {
        @size: 45% 3vmin;
        @place-cell: @pn(
          50% @pd(25, 30)%,
          50% @pd(30, 35)%
        );
        transform: translate(@r(±20%), @r(±10%)) rotate(@r(±25)deg);

::after {
          content: "";
          @size: 10vmin 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: @doodle(
            @grid: 4x1 / 100% 100%;
            display: flex;
            ::before {
              content: "";
              width: 75%;
              height: 80%;
              background: linear-gradient(45deg, #000, #ff4b00 calc(10% + @i * 8%));
              border-radius: 25%;
            }
            ::after {
              content: "";
              width: 25%;
              height: 100%;
              background: @pd(#ffd850, #75c58d, #ffaece);
            }
          );
        }
      }
      @nth(16, 17) {
        @place-cell: @pd(
          75% 37%,
          80% 46%
        );
        transform: rotate(@r(360deg));
        @size: 10%;
        background: linear-gradient(-45deg, #2e996e calc(50% - 0.15vmin), #252525 calc(50% - 0.15vmin + 1px), #252525 calc(50% + 0.15vmin), #2e996e calc(50% + 0.15vmin + 1px));
        border-radius: 100% 0 100% 0;
      }
      @nth(18, 19) {
        @size: calc(3.2vmin);
        @place-cell: @pd(
          68% 52%,
          73% 60%
        );
        transform: rotate(@r(360deg));
        background-image: @doodle(
          @grid: 1x6 / 100% 100%;;
          @size: 10% 20%;
          position: absolute;
          top: 29%;
          left: 45%;
          background-color: #d5f2d6;
          border-radius: 100%;
          transform: rotate(calc(60deg * (@i + 1))) translate3d(0%, -40%, 0);
          transform-origin: 50% 100%;
        );
        background-color: #74c58d;
        border: 0.2vmin solid #006c61;
        border-radius: 100%;
      }
      @nth(20, 21, 22, 23) {
        @place-cell: @pd(
          50% 75%,
          56% 70%,
          65% 66%,
          60% 77%
        );
        transform: rotate(@r(360deg));
        @size: 1.6vmin 2vmin;
        background: #ff4b00;
        border-radius: 100%;
      }
      @nth(24) {
        @size: 20%;
        @place-cell: 50% 55%;
        background-color: #ffedb4;
        border: 0.5vmin solid #75c58d;
        border-radius: 100%;
        transform: rotate(@r(360deg));

::before {
          content: "";
          @size: 100%;
          @place-cell: center;
          transform: rotate(@r(360deg));
          background-image: @doodle(
            @grid: 2x2 / 100% 100%;
            background: #2e996e;
            transform: scale(0.15) rotate(@r(±40deg));
            transform-origin: @pn(80% 80%, 0 80%, 100% 50%);
            @nth(4) {
              opacity: 0;
            }
          );
        }

::after {
          content: "";
          @size: 100%;
          @place-cell: center;
          transform: rotate(@r(360deg));
          background-image: @doodle(
            @grid: 2x2 / 100% 100%;
            transform: rotate(@r(180deg)) scale(0.6) skew(@r(-25, -35)deg);
            border-radius: @rep(4, @r(50%, 100%));
            border-left: 12vmin solid #ffd850;
            border-top: 12vmin solid #ffd850;
            transform-origin: @pn(80% 80%, 0 80%, 100% 50%);
            @nth(4) {
              opacity: 0;
            }
          );
        }
      }
      @nth(25, 26, 27) {
        @place-cell: @pd(
          27% 50%,
          32% 60%,
          37% 70%,
        );
        transform: rotate(@r(360deg));
        @size: 15% 15%;
        ::after {
          content: "";
          @size: 100%;
          background: @pn(#ffedb4, #ffd850);
          clip-path: @shape(
            points: 360;
            r: .8 + cos(3t)*.09;
          );
        }
        filter: drop-shadow(0 0 0.3vmin #00000040);
      }
    );
    --8: (
      :doodle {
        flex: none;
        @grid: 1x12;
        background: radial-gradient(circle at 50% 50%, #fffaf8 45%, #e386b3 calc(45% + 1px), #e386b3 46%, #fffaf8 calc(46% + 1px), #fffaf8 calc(54%), #ffd850 calc(54% + 1px));
        overflow: hidden;
      }
      @place-cell: center;
      transition: 0.5s ease all;
      ::before, ::after { transition: inherit; }
      @nth(1, 2, 3, 10, 11) {
        @place-cell: @r(30, 70)% @r(40, 60)%;
        transform: rotate(@r(360deg));
        @size: 15% 15%;
        ::after {
          content: "";
          @size: 100%;
          background: @pn(#ffedb4, #ffd850);
          clip-path: @shape(
            points: 360;
            r: .8 + cos(3t)*.09;
          );
        }
        filter: drop-shadow(0 0 0.3vmin #00000040);
      }
      @nth(4, 5, 6) {
        @place-cell: @r(30, 70)% @r(40, 60)%;
        background: @pd(#2e996e, #75c58d);
        clip-path: @shape(
          points: 360;
          r: .8 + cos(8t)*.15;
        );
      }
      @nth(7, 8, 9) {
        @size: calc(3.2vmin * 1.4);
        @place-cell: @r(30, 70)% @r(35, 65)%;
        background-image: @doodle(
          @grid: 1x6 / 100% 100%;;
          @size: 10% 20%;
          position: absolute;
          top: 29%;
          left: 45%;
          background-color: #d5f2d6;
          border-radius: 100%;
          transform: rotate(calc(60deg * (@i + 1))) translate3d(0%, -40%, 0);
          transform-origin: 50% 100%;
        );
        background-color: #74c58d;
        border: 0.28vmin solid #006c61;
        border-radius: 100%;
      }
      @nth(12) {
        transform: rotate(@r(180deg));
        @size: 20vmin 7vmin;
        border-radius: 5vmin;
        background-image: @svg(
          viewBox: 0 0 1000 1000;
          circle*100 {
            cx: @r(20, 980);
            cy: @r(20, 980);
            r: @r(1, 10);
            fill: rgba(255, 255, 255, @r(1));
          }
        );
        background-color: #a06449;

::before {
          content: "";
          @place-cell: 20% 50%;
          @size: 3vmin;
          color: #fffaf8;
          background: currentColor;
          border-radius: 100% 0 100% 0;
          transform: rotate(-80deg) skew(-15deg);
          filter: drop-shadow(3.6vmin 8vmin 0 currentColor) drop-shadow(1.8vmin 4vmin 0 currentColor);
        }
      }
    );
  }
</style>
<main>
  <section>
    <css-doodle use="var(--1)"></css-doodle>
    <css-doodle use="var(--2)"></css-doodle>
    <css-doodle use="var(--3)"></css-doodle>
    <css-doodle use="var(--4)"></css-doodle>
    <css-doodle use="var(--5)"></css-doodle>
    <css-doodle use="var(--6)"></css-doodle>
    <css-doodle use="var(--7)"></css-doodle>
    <css-doodle use="var(--8)"></css-doodle>
    <css-doodle use="var(--1)"></css-doodle>
  </section>
</main>
</body>
</html>

Frontend Forever App